import React from "react";
import { observer } from "mobx-react";
import { Link } from "react-router-dom";
import { Card } from "antd";
import { useStores } from "../../store/store";
// eslint-disable-next-line no-unused-vars
import { BlogInfo } from "../../store/blog";
import { BLOG_DOMAIN } from "../../lib/config";

const { Meta } = Card;

function Blogger() {
    const { authorInfo } = useStores('blogList') as BlogInfo;
    return (
        <Link to="/about">
            <Card
                bordered={false}
                hoverable
                cover={<img style={{ width: '240px' }} alt="avatar" src={authorInfo.avatarUrl} />}
            >
                <Meta title={authorInfo.nickname} description={BLOG_DOMAIN} />
            </Card>
        </Link>
    );
}

export default observer(Blogger);
